import React from 'react'
import './rightenergyconsumption.scss'
import Highcharts from 'highcharts/highstock';
import HighchartsReact from 'highcharts-react-official';

// 下
const options3 = {
    credits: {
        enabled: false,
    },
    title: {
        text: ''
    },
    yAxis: {
        gridLineColor: "rgba(121, 121, 121, 1)",
        maxStaggerLines: 5,
        tickPixelInterval: 2,
        title: {
            text: null
        },
        labels: {
            style: {
                color: 'white'
            },
        },
        tickPositions: [0, 500, 1000, 1500, 2000]
    },
    chart: {
        backgroundColor: null,
        height: 250,
        width: 530,
        type: 'areaspline',
    },
    xAxis: {
        labels: {
            style: {
                color: 'white'
            }
        },
        lineColor: 'rgba(201, 201, 201, 201)',
        categories: ['18:00', '18:05', '18:10', '18:15', '18:20', '18:25'],

    },
    legend: {
        align: 'center',
        verticalAlign: 'top',
        y: 0,
        itemStyle: {
            color: '#fff',
            fontWeight: 400
        }
    },
    plotOptions: {
        areaspline: {
            fillOpacity: 0.5
        }
    },
    // 设置线
    series: [{
        name: '电力负荷',
        data: [1800, 1400, 700, 600, 800, 1000],
        color: 'rgb(91,143,249)',
        marker: {
            fillColor: 'white',
            lineWidth: 1,
            lineColor: 'rgb(91,143,249)'
        }
    },
    {
        name: '实时电压',
        data: [1600, 1100, 500, 300, 500, 700],
        color: 'rgb(90,216,166)',
        marker: {
            fillColor: 'white',
            lineWidth: 1,
            lineColor: 'rgb(90,216,166)'
        }
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 400
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'top'
                }
            }
        }]
    }
}

const Charts3 = () => <div>
    <HighchartsReact
        highcharts={Highcharts}
        options={options3}
        style={{ height: '500px' }}
    />
</div>

const tableData = [
    { id: 1, name: "浙江XX科技有限公司", address: "A1幢502室", discharge: 115.30 },
    { id: 2, name: "浙江XX科技有限公司", address: "A1幢502室", discharge: 115.30 },
    { id: 3, name: "浙江XX科技有限公司", address: "A1幢502室", discharge: 115.30 },
    { id: 4, name: "浙江XX科技有限公司", address: "A1幢502室", discharge: 115.30 },
    { id: 5, name: "浙江XX科技有限公司", address: "A1幢502室", discharge: 115.30 },
    { id: 6, name: "浙江XX科技有限公司", address: "A1幢502室", discharge: 115.30 },
    { id: 7, name: "浙江XX科技有限公司", address: "A1幢502室", discharge: 115.30 },
    { id: 8, name: "浙江XX科技有限公司", address: "A1幢502室", discharge: 115.30 },
    { id: 9, name: "浙江XX科技有限公司", address: "A1幢502室", discharge: 115.30 },
    { id: 10, name: "浙江XX科技有限公司", address: "A1幢502室", discharge: 115.30 },
]
function Right_Energy_consumption() {
    return (
        <div className='right_energy_consumption_box'>

            {/* 上 */}
            <div className='right_energy_consumption_box_top'>
                <h2 style={{ color: "white", margin: "3% 0px -7px 5%", fontSize: 20 }}>实时监测</h2>

                <Charts3 />
            </div>

            {/* 下 */}
            <div className='right_energy_consumption_box_bottom'>
                <h2 style={{ color: "white", margin: "7% 0px -16px", fontSize: 20 }}>企业低碳排名</h2>
                <div>
                    <table className='right_energy_consumption_box_bottomTB'>
                        <thead >
                            <tr>
                                <th>排名</th>
                                <th>企业名称</th>
                                <th>企业地址</th>
                                <th>单位产值碳排放</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                tableData.map((item) => {
                                    return (
                                        <tr key={item.id}>
                                            <td>{item.id}</td>
                                            <td>{item.name}</td>
                                            <td>{item.address}</td>
                                            <td>{item.discharge}</td>
                                        </tr>
                                    )
                                })
                            }
                        </tbody>
                    </table>
                </div>
            </div>


        </div>
    )
}

export default Right_Energy_consumption